<template>
  <div>
    <!-- 搜索表单区域 -->
    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
      <el-form-item label="">
        <el-input v-model="searchForm.storeName" placeholder="仓库名称" clearable />
      </el-form-item>
      <el-form-item label="">
        <el-input v-model="searchForm.address" placeholder="仓库地址" clearable />
      </el-form-item>
      <el-form-item label="">
        <el-select v-model="searchForm.state" placeholder="仓库状态" clearable>
          <el-option label="启用" value="1"></el-option>
          <el-option label="禁用" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" round @click="search">查询</el-button>
      </el-form-item>
    </el-form>

    <!-- 操作按钮区域 -->
    <div class="operation-area">
      <el-button type="primary" round @click="addClick">新增仓库</el-button>
      
      <!-- 新增仓库对话框 -->
      <el-dialog
        v-model="addDialogVisible"
        title="新增仓库信息"
        width="500"
      >
        <el-form :model="newWarehouse">
          <el-form-item label="仓库名称" :label-width="formLabelWidth">
            <el-input v-model="newWarehouse.storeName" autocomplete="off" />
          </el-form-item>
          <el-form-item label="仓库代码" :label-width="formLabelWidth">
            <el-input v-model="newWarehouse.storeCode" autocomplete="off" />
          </el-form-item>
          <el-form-item label="仓库地址" :label-width="formLabelWidth">
            <el-input v-model="newWarehouse.address" autocomplete="off" />
          </el-form-item>
          <el-form-item label="占地面积" :label-width="formLabelWidth">
            <el-input v-model="newWarehouse.mg" autocomplete="off" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="addDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="addWarehouseClick">确认</el-button>
          </div>
        </template>
      </el-dialog>

      <el-button type="warning" round @click="exportData">导出数据</el-button>
    </div>

    <div style="height: 20px;"></div>

    <!-- 数据表格区域 -->
    <el-table
      :data="searchData.resultList"
      border
      style="width: 100%"
      max-height="500"
    >
      <!-- 数据列 -->
      <el-table-column prop="storeId" sortable label="序号" />
      <el-table-column prop="address" sortable label="仓库地址" />
      <el-table-column prop="storeName" sortable label="仓库名称" />
      <el-table-column prop="state" sortable label="仓库状态">
        <template #default="scope">
          <el-tag :type="scope.row.state === '1' ? 'success' : 'info'">
            {{ scope.row.state === '1' ? '启用' : '禁用' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="mg" sortable label="占地面积" />
      <el-table-column prop="createTime" sortable label="创建时间" />
      <el-table-column prop="createName" sortable label="创建人" />
      <el-table-column prop="updateTime" sortable label="修改时间" />
      <el-table-column prop="updateName" sortable label="修改人" />
      
      <!-- 操作列 -->
      <el-table-column flxed="right" label="操作" width="200">
        <!-- 将插槽内容移动到列内部 -->
        <template #default="scope">
          <div class="operation-buttons">
            <!-- 编辑按钮，点击时调用openDialog方法，传入当前行的数据 -->
            <el-button
              type="primary"
              size="small"
              @click="openDialog(scope.row)"
            >编辑</el-button>
            <!-- 编辑仓库信息的对话框 -->
            <el-dialog v-model="editDialogVisible" title="编辑仓库信息" width="500">
              <!-- 表单 -->
              <el-form :model="form">
                <el-form-item label="仓库名称" :label-width="formLabelWidth">
                  <el-input v-model="form.storeName" autocomplete="off" />
                </el-form-item>
                <el-form-item label="仓库代码" :label-width="formLabelWidth">
                  <el-input v-model="form.storeCode" autocomplete="off" />
                </el-form-item>
                <el-form-item label="仓库地址" :label-width="formLabelWidth">
                  <el-input v-model="form.address" autocomplete="off" />
                </el-form-item>
                <el-form-item label="占地面积" :label-width="formLabelWidth">
                  <el-input v-model="form.mg" autocomplete="off" />
                </el-form-item>
              </el-form>
              <!-- 对话框底部 -->
              <template #footer>
                <div class="dialog-footer">
                  <!-- 取消按钮，点击时关闭对话框 -->
                  <el-button @click="editDialogVisible = false">取消</el-button>
                  <!-- 确认按钮，点击时调用saveChanges方法 -->
                  <el-button type="primary" @click="saveChanges">确认</el-button>
                </div>
              </template>
            </el-dialog>
            <el-button
              type="danger"
              size="small"
              @click="handleDelete(scope.row)"
            >删除</el-button>
            <el-button
              :type="scope.row.state === '1' ? 'info' : 'success'"
              size="small"
              @click="toggleStatus(scope.row)"
            >{{ scope.row.state === '1' ? '禁用' : '启用' }}</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页区域 -->
    <div class="pagination-area">
      <el-pagination
        v-model:current-page="WarehouseList.pageNum"
        v-model:page-size="WarehouseList.pageSize"
        :page-sizes="[5, 10, 15, 20]"
        :size="size" 
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="searchData.totalNum"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue'
import { searchWareHouse, addWareHouse, changeWareHouse, deleteWareHouse } from "../api/api.js"
import { ElMessage } from 'element-plus'

// ================ 状态定义 ================
// 表格数据
const searchData = ref([])
const addDialogVisible = ref(false)
const editDialogVisible = ref(false)
const formLabelWidth = '120px'

// 搜索表单对象
const searchForm = reactive({
  storeName: '',    // 仓库名称
  address: '',      // 仓库地址
  state: '',        // 仓库状态
})

// 仓库查询参数
const WarehouseList = reactive({
  storeName: "北京仓库",
  address: "北京市朝阳区",
  state: "1",
  pageNum: 1,
  pageSize: 5
})

// 新增仓库表单对象
const newWarehouse = reactive({
  storeName: '',    // 仓库名称
  address: '',      // 仓库地址
  state: '',        // 仓库状态
  mg: ''           // 占地面积
})

// 编辑仓库表单对象
const form = reactive({
  storeId: '',      // 仓库ID
  storeName: '',    // 仓库名称
  storeCode: '',    // 仓库代码
  address: '',      // 仓库地址
  state: '',        // 仓库状态
  mg: ''           // 占地面积
})

// ================================
/**
 * 执行搜索操作
 */
const search = () => {
  // 同步搜索条件到查询参数
  WarehouseList.storeName = searchForm.storeName
  WarehouseList.address = searchForm.address
  WarehouseList.state = searchForm.state

  // 调用搜索接口
  searchWareHouse(WarehouseList).then(res => {
    searchData.value = res.data.data
      if(res.data.code === 200) {
    ElMessage.success('查询成功')
  } else {
    ElMessage.error('查询失败：' + res.data.message)
  }
  })

}

// 按钮事件处理函数
const addClick = () => {
  Object.keys(newWarehouse).forEach(key => {
    newWarehouse[key] = ''
  })
  addDialogVisible.value = true
}

const addWarehouseClick = () => {
  addWareHouse(newWarehouse).then(res => {
    addDialogVisible.value = false
    search()
  })
}

const openDialog = (row) => {
  Object.assign(form, row)
  editDialogVisible.value = true
}

const saveChanges = () => {
  changeWareHouse(form).then(res => {
    editDialogVisible.value = false
    search()
  })
}

// 状态操作函数
const toggleStatus = (row) => {
  row.state = row.state === '1' ? '0' : '1'
  changeWareHouse(row).then(() => {
    search()
  })
}

const handleDelete = (row) => {
  deleteWareHouse(row.storeId).then(() => {
    search()
  })
}

// 分页操作函数
const handleSizeChange = () => {
  search()
}

const handleCurrentChange = () => {
  search()
}

// 生命周期钩子
onMounted(() => {
  search()
})
</script>

<style scoped>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}

.operation-area {
  margin: 15px 0;
}

.pagination-area {
  margin-top: 20px;
  text-align: right;
}
</style>



